<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="handleDownLoadClick">下载配置</el-button>
      <el-button type="primary" @click="handlePreview">预览效果</el-button>
      <el-button type="primary" @click="loadPreview">加载通用模板</el-button>
    </div>
    <blockCard title="字段列表">
      <el-button slot="right" icon="el-icon-plus" type="primary" plain @click="handleAddClick">添加字段</el-button>
      <el-field-list ref="fields" @validator="editValidator" />
    </blockCard>
    <blockCard title="接口信息">
      <el-button slot="right" icon="el-icon-plus" type="primary" plain @click="handleAddApi">添加接口</el-button>
      <el-api-list ref="api" />
    </blockCard>
    <blockCard title="表格按钮">
      <el-action-list ref="actions" @action="editButtonCode"></el-action-list>
      <el-button slot="foot" icon="el-icon-plus" type="primary" plain @click="addAction">添加按钮</el-button>
    </blockCard>
    <blockCard title="表单选项">
      <el-descriptions border :labelStyle="{width: '80px'}" :contentStyle="{width: '220px'}" :column="4">
        <el-descriptions-item label="label-width">
          <el-input v-model="formConfig.labelWidth" placeholder="标签宽度" />
        </el-descriptions-item>
        <el-descriptions-item label="label-position">
          <el-select v-model="formConfig.labelPosition" placeholder="标签位置">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="inline">
          <el-checkbox v-model="formConfig.inline"></el-checkbox>
        </el-descriptions-item>
        <el-descriptions-item label="status-icon">
          <el-checkbox v-model="formConfig.statusIcon"></el-checkbox>
        </el-descriptions-item>
      </el-descriptions>
    </blockCard>
    <blockCard title="表格选项">
      <el-descriptions border :labelStyle="{width: '80px'}" :contentStyle="{width: '220px'}" :column="4">
        <el-descriptions-item label="索引列"><el-checkbox v-model="tableConfig.index"/></el-descriptions-item>
        <el-descriptions-item label="多选列"><el-checkbox v-model="tableConfig.selection"/></el-descriptions-item>
        <el-descriptions-item label="表格头"><el-checkbox v-model="tableConfig.showHeader"/></el-descriptions-item>
        <el-descriptions-item label="size">
          <el-select v-model="tableConfig.size">
            <el-option v-for="i in ['medium', 'small', 'mini']" :label="i" :value="i"></el-option>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </blockCard>
    <blockCard title="分页选项">
      <el-form inline class="clbz-ds-form">
        <el-form-item label="layout">
          <el-select v-model="pagination.layout" multiple placeholder="请选择">
            <el-option v-for="key in ['sizes', 'prev', 'pager', 'next', 'jumper', 'total']" :value="key" :label="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="pageSize">
          <el-input v-model="pagination.pageSize" placeholder="page-size" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="pagination.background">背景色</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="pagination.small">small</el-checkbox>
        </el-form-item>
      </el-form>
    </blockCard>
    <CodeEditorComponent ref="edit"/>
  </div>
</template>

<script>
import elApiList from './components/apiList'
import elFieldList from './components/fieldList'
import elActionList from './components/actionList'
import blockCard from './components/block.vue'
import CodeEditorComponent from '@/components/CodeEditor'
export default {
  components: {
    elApiList,
    blockCard,
    elFieldList,
    elActionList,
    CodeEditorComponent
  },
  data() {
    return {
      formConfig: {
        labelWidth: '120px'
      },
      tableConfig: {},
      pagination: {
        total: 0,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.ininData()
  },
  methods: {
    ininData(){
      const data = sessionStorage.getItem('previewData')
      if (!data) return
      const table = JSON.parse(data)
      this.pagination = table.pagination
      this.formConfig = table.formConfig
      this.tableConfig = table.tableConfig
      this.$refs.api.setData(table.api)
      this.$refs.fields.setData(table.fields)
      this.$refs.actions.setData(table.actions)
    },
    editButtonCode(row){
      const doc = `
      /**
      * @description: 表单项验证函数
      * @param {*} value 当前字段项变化时的值
      * @param {Object} form 当前表单所有字段的值
      * @return {String|Object} 返回值为字符串时表示错误信息，为true时表示验证通过
      */
      function (value, form) {
      }
      `
      const callback = code => {
        row.action = code
      }
      this.$refs.edit.show(row.action, callback, doc.split('\n'))
    },
    editValidator({ row }) {
      const doc = `
      /**
      * @description: 表单项验证函数
      * @param {*} value 当前字段项变化时的值
      * @param {Object} form 当前表单所有字段的值
      * @return {String|Object} 返回值为字符串时表示错误信息，为true时表示验证通过
      */
      function (value, form) {
      }
      `
      const callback = code => {
        row.validator = code
      }
      this.$refs.edit.show(row.validator, callback, doc.split('\n'))
    },
    addAction() {
      this.$refs.actions.handleClick()
    },
    async handlePreview() {
      sessionStorage.setItem('previewData', JSON.stringify({
        api: this.$refs.api.list,
        formConfig: this.formConfig,
        tableConfig: this.tableConfig,
        actions: await this.$refs.actions.getData(),
        pagination: { ...this.pagination, layout: this.tostring(this.pagination.layout) },
        fields: this.$refs.fields.list,
      }))
      this.$router.push('/CommonList?config=preview')
    },
    handleAddClick() {
      this.$refs.fields.handleClick()
    },
    handleAddApi() {
      this.$refs.api.handleClick()
    },
    tostring(arr) {
      if (arr && arr.length) {
        return arr.join(',')
      }
      return undefined
    },
    loadPreview(){},
    handleDownLoadClick() {
      const config = {
        api: this.$refs.api.list,
        formConfig: this.formConfig,
        tableConfig: this.tableConfig,
        actions: this.$refs.actions.list,
        pagination: { ...this.pagination, layout: this.tostring(this.pagination.layout) },
        fields: this.$refs.fields.list,
      }
      this.downLoadData(config)
    },
    downLoadData(data) {
      var jsonData = JSON.stringify(data);
      var blob = new Blob([jsonData], { type: 'application/json' });
      var a = document.createElement('a');
      a.download = 'config.json';
      a.href = window.URL.createObjectURL(blob);
      a.dispatchEvent(new MouseEvent('click'));
    }
  }
}
</script>

<style lang="scss">
.clbz-ds-form {
  .el-form-item {
    margin-right: 50px
  }
}
</style>